<script setup>
import { useAddEditHook } from '@/hooks/crud/index.js'
import {  useCommonConfig ,useCommonDict} from './hook.js'
import { useFormConfigHook } from '@/hooks/usePlusConfigHook.js'
import Crontab from '@/components/Crontab/index.vue'
const { proxy,  primaryKey,apiFn, moduleName } = useCommonConfig()
const {   sys_job_group, sys_job_status } = useCommonDict()
const emit = defineEmits(['refreshList'])

// 表单初始化数据
const initForm = {
  jobId: undefined,
  jobName: undefined,
  jobGroup: undefined,
  invokeTarget: undefined,
  cronExpression: undefined,
  misfirePolicy: '1',
  concurrent: '1',
  status: "0"
}
const rules = {
  jobName: [{ required: true, message: "任务名称不能为空", trigger: "blur" }],
  invokeTarget: [{ required: true, message: "调用目标字符串不能为空", trigger: "blur" }],
  cronExpression: [{ required: true, message: "cron执行表达式不能为空", trigger: "change" }]
}

// 钩子函数
const handlerConfig = {
  beforeInfoFn: (reqData) => {
    return reqData[[primaryKey]]
  },
  afterInfoFn: (resData) => {
    return resData
  },
  beforeSubmitFn: (reqData) => {
    return reqData
  },
  afterSubmitFn: (resData) => {
    emit('refreshList')
    return resData
  },
  beforeCloseFn: () => true,
  afterCloseFn: () => {}
}

const { gOpen, gAllExposeOption,gVisible,gFormInstance,gFormData, gIsEdit  } = useAddEditHook({
  moduleName,
  primaryKey,
  initForm,
  rules,
  apiFnConfig:apiFn.apiFnConfig,
  handlerConfig
})

const { gDialogConfig,  gFormConfig} = useFormConfigHook(gAllExposeOption,{
  dialogConfig:{
    width: 700
  },
  formConfig:{
    labelWidth: 150,
  }
});

const columns = [
  {
    label: "任务名称",
    prop: "jobName",
    required: true
  },
  {
    label: "任务组名",
    prop: "jobGroup",
    valueType: "select",
    options: sys_job_group
  },
  {
    label: "调用目标字符串",
    prop: "invokeTarget",
    tooltip: "任务调用的方法名、参数",
  },
  {
    label: "cron表达式",
    prop: "cronExpression",
  },
  {
    label: "状态",
    prop: "status",
    valueType: "radio",
  },
  {
    label: "执行策略",
    prop: "misfirePolicy",
  },
  {
    label: "执行策略",
    prop: "concurrent",
  },
]

const openCron = ref(false)
const expression = ref('')
/** cron表达式按钮操作 */
function handleShowCron() {
  expression.value = gFormData.value.cronExpression;
  openCron.value = true;
}

/** 确定后回传值 */
function crontabFill(value) {
  gFormData.value.cronExpression = value;
}

// 暴露
defineExpose({ gOpen })
</script>
<template>
  <PlusDialog v-model="gVisible" v-bind="gDialogConfig">
    <PlusForm ref="gFormInstance" v-model="gFormData" :columns="columns" v-bind="gFormConfig">
      <template #plus-field-cronExpression>
        <el-input v-model="gFormData.cronExpression" placeholder="请输入cron执行表达式">
          <template #append>
            <el-button type="primary" @click="handleShowCron">
              生成表达式
              <i class="el-icon-time el-icon--right"></i>
            </el-button>
          </template>
        </el-input>
      </template>
      <template #plus-field-status>
        <el-radio-group v-model="gFormData.status">
          <el-radio
            v-for="dict in sys_job_status"
            :key="dict.value"
            :value="dict.value"
          >{{ dict.label }}</el-radio>
        </el-radio-group>
      </template>
      <template #plus-field-misfirePolicy>
        <el-radio-group v-model="gFormData.misfirePolicy">
          <el-radio-button value="1">立即执行</el-radio-button>
          <el-radio-button value="2">执行一次</el-radio-button>
          <el-radio-button value="3">放弃执行</el-radio-button>
        </el-radio-group>
      </template>
      <template #plus-field-concurrent>
        <el-radio-group v-model="gFormData.concurrent">
          <el-radio-button value="0">允许</el-radio-button>
          <el-radio-button value="1">禁止</el-radio-button>
        </el-radio-group>
      </template>
    </PlusForm>
  </PlusDialog>

  <PlusDialog title="Cron表达式生成器"  :has-footer="false" :width="600" v-model="openCron" append-to-body destroy-on-close>
    <crontab ref="crontabRef" @hide="openCron=false" @fill="crontabFill" :expression="expression"></crontab>
  </PlusDialog>
</template>
<style lang="scss" scoped></style>
